<template>
	<view class="com" :class="{borbot:border}" :style="comStyle">
		<view class="left" :style="lStyle">
			{{title}}
		</view>
		<view class="right" :style="rStyle" @click.stop="tourl()">
			{{word}}<u-icon name="arrow-right" v-if="rightIcon"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "order_cell",
		props: {
			border: {
				type: Boolean,
				default: false
			},
			rightIcon: {
				type: Boolean,
				default: false
			},
			padding: {
				type: String,
				default: "20rpx 0rpx 20rpx 0rpx"
			},
			title: {
				type: String,
				default: ""
			},
			word: {
				type: String,
				default: ""
			},
			lcolor: {
				type: String,
				default: ""
			},
			rcolor: {
				type: String,
				default: ""
			},
			lsize: {
				type: Number,
				default: 14
			},
			rsize: {
				type: Number,
				default: 14
			},
		},
		data() {
			return {
				lStyle: "color:" + this.lcolor + ";font-size:" + this.lsize + "rpx",
				rStyle: 'color:' + this.rcolor + ';font-size:' + this.rsize + 'rpx',
				comStyle: 'padding:' + this.padding
			};
		},
		methods: {
			tourl() {
				this.$emit('rtoUrl')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.borbot {
		border-bottom: 1rpx solid #DFDFDF;
	}

	.left {
		width: 175rpx;
		word-break: break-all;
	}

	.right {
		width: 470rpx;
		word-break: break-all;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.com {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>